{% set clazz = "login" %}
{% extends './modules/common/templates/main.html' %}
{% block content %}
  {% if !nested %}
    <header class="bar bar-header">
      {{ macro.back() }}
      <h1 class="title">登录</h1>
    </header>
  {% endif %}
  <section>
    {% if error %}
      <div class="message" ui-mode="error">
        <i class="flag"></i>
        <span>{{ error }}</span>
      </div>
    {% endif %}
    <form method="post" autocomplete="off" name="login">
      <div class="list compact overlap">
        <label class="item item-input">
          <span class="label">手机号</span>
          <span class="control">
            <input type="tel" name="mobile" placeholder="请输入手机号" maxlength="11" required value="{{ mobile }}" />
          </span>
        </label>
        <label class="item item-input">
          <span class="label">密　码</span>
          <span class="control">
            <input type="password" name="password" placeholder="请输入密码" maxlength="20" required />
          </span>
        </label>
        <label class="item item-input">
          <span class="label">验证码</span>
          <span class="control">
            <input type="hidden" name="verifyKey" value="{{ key }}" />
            <input type="text" name="verifyCode" placeholder="请输入验证码" maxlength="20" required />
          </span>
          <span class="interact">
            <button class="button transparent text-light" type="button">
              <img src="{{ captcha }}" />
              <i class="icon">&#58904;</i>
            </button>
          </span>
        </label>
      </div>
      <div class="vspace hspace" ui-mode="30px">
        <button class="button warning submit">登录</button>
      </div>
    </form>
  </section>
{% endblock %}
{% block script %}
  {% parent %}
  <script src="{{ '/static/js/login.js'|version }}"></script>
{% endblock %}